<template>
	<view class="content">
		<view class="selector-wrapper">
			<view class="selected" :class="{'open': showSelector}" @click="showSelector = !showSelector">{{selectorList[selectorIndex]}}</view>
			<view class="selector-box" v-show="showSelector">
				<view class="selector-item" v-for="(item,index) in selectorList" :key="index" @click="selectorIndex=index;showSelector=false">{{item}}</view>
			</view>
		</view>
		<view class="list-wrapper">
			<view class="list-item" v-for="(item,index) in currentLists" :key="index">
				<view class="item-flex"><text class="grey-blue-F fz21">提现</text><text class="grey-blue-F fz21">2021-6-28   12:56</text></view>
				<view class="item-flex"><text class="fz21 green-F">+6951.00  USDT</text><text class="fz17 green-F">成功</text></view>
				<view class="item-flex">
					<view class="address">0x23egb16dFB52...CE8b5921</view>
					<button class="btn">已完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				showSelector: false,
				selectorList: ['全部','USDT','BTC'],
				selectorIndex: 0,
				currentLists: [1,1,2,3],
			}
		},
		computed:{
			
		},
		methods: {
			
		},
		onShow() {
			
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 20rpx;
		padding-bottom: 120rpx;
		min-height: 100vh;
		box-sizing: border-box;
		color: #FFFFFF;
	}
	.selector-wrapper{
		width: 686rpx;
		height: 60rpx;
		margin: 0 auto;
		border-radius: 6rpx;
		background-color: #202A33;
		position: relative;
		
		.selected{
			display: inline-block;
			// background-color: #F20;
			padding: 0 40rpx;
			font-size: 25rpx;
			line-height: 60rpx;
			position: relative;
		}
		.selected::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-top: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-right: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 26rpx;
			right: 0%;
		}
		.selected.open::after{
			content: '';
			display: inline-block;
			width: 0rpx;
			height: 0rpx;
			border-right: 9rpx solid rgba($color: #ffffff, $alpha: 1);
			border-top: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-left: 8rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 22rpx;
			right: 1%;
		}
		.selector-box{
			display: inline-block;
			padding: 10rpx 60rpx;
			position: absolute;
			left: 1rpx;
			top: 60rpx;
			background-color: #071724;
			z-index: 3;
		}
		
		.selector-item{
			font-size: 25rpx;
			line-height: 60rpx;
		}
	}
	.list-wrapper{
		width: 686rpx;
		margin: 2rpx auto;
		border-radius: 6rpx;
		background-color: #202A33;
	}
	.list-item{
		height: 193rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #071724;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.item-flex{
			display: flex;
			justify-content: space-between;
		}
		.address{
			color: #BFBFBF;
			font-size: 24rpx;
			transform: scale(0.875);
			transform-origin: 0% 50%;
		}
		.btn{
			margin: 0;
			padding: 6rpx 10rpx;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #FFFFFF;
			background-color: #0DD4BB;
		}
	}
</style>
